<script setup lang="ts">
import { ref } from 'vue'
import { message, theme } from 'ant-design-vue'
import usePx2rempx from '@/hook/px2rempx'
import { useRouter } from 'vue-router'

const test = ref('button')

const { token } = theme.useToken()

console.log('token', token.value, token.value.colorPrimary)

const { remPx } = usePx2rempx(14)

const router = useRouter()

function goto() {
  router.push('/demo')
}
</script>

<template>
  <main>
    <div class="home">home</div>
    <div class="box">BOX</div>
    <a-button>test</a-button>
    <SvgIcon name="arrow-down" :size="60" color="#ccc" />
    <SvgIcon name="card_add_icon" :size="60" color="#ccc" />
    <SvgIcon name="sidebar" :size="60" color="#ccc" />
    <a-input />
    <a-button type="primary" @click="message.info('test')">{{ test }}</a-button>
    <a-radio>test</a-radio>
    <div :style="{ fontSize: `${remPx}px` }">{{ remPx }}</div>
    <a-button type="primary" @click="goto">goto</a-button>
  </main>
</template>

<style lang="less" scoped>
@unit: 1920 / 10;
.pxToRem (@px, @attr: width) {
  @rem: (@px / @unit);
  @{attr}: ~'@{rem}rem';
}
.home {
  font-size: 20px;
}
.box {
  .pxToRem(75);
  .pxToRem(150, height);
}
</style>
